<template>
    <view class="container">
        <u-toast ref="uToast"></u-toast>
        <view class="action" v-if="activityDetail">
            <view class="banner"></view>
            <view class="state">抽奖成功</view>
            <view class="activity-log" @click="navigateTo('pages/lotteryLog/index', { activityId })">抽奖记录 ></view>
            <view class="action-kj">
                <u-count-down
                        :time="activityInfo.endTime"
                        format="HHH:mm:ss"
                        @change="onChange"
                >
                    <view class="time">
                        <view class="action-kj-title">距离开奖</view>
                        <text class="time__item">{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}}:</text>
                        <text class="time__item">{{ timeData.minutes>=10? timeData.minutes:'0'+timeData.minutes }}:</text>
                        <text class="time__item">{{ timeData.seconds>=10? timeData.seconds:'0'+timeData.seconds }}</text>
                    </view>
                </u-count-down>
            </view>
            <view class="tips">剩余抽奖机会<text>{{userActivity? userActivity.awardTime:0}}</text>次</view>
            <block v-if="!activityInfo.open">
                <view class="btn" @click="onsubmit" v-if="userActivity.awardTime > 0">继续抽奖</view>
                <view class="disable-btn" v-else>等待开奖</view>
            </block>
            <block v-else>
                <view class="disable-btn" v-if="activityResult">已开奖</view>
            </block>
            <view class="active-time">抽奖结果将于{{ activityInfo.endAt }}公布</view>
            <view class="activity-rule">
                <view class="rule-title">————【 抽奖活动规则 】————</view>
                <view class="rule-content">
                    <view v-for="(info, k) in activityInfo.ruleInfo" :key="k" class="p">{{k+1}}. {{ info }}</view>
                </view>
            </view>
            <u-popup :show="winShow" mode="center">
                <view class="win" v-if="activityResult">
                    <view class="win-icon"></view>
                    <view class="win-title">恭喜中奖</view>
                    <block v-if="activityResult.prizeType==='entity'">
                        <view class="win-msg" v-if="activityResult.state === 'complete'">
                            <view class="p">奖品已发放</view>
                            <view class="p">物流公司： {{ activityResult.expressType }}</view>
                            <view class="p">物流单号： {{ activityResult.expressNum }}</view>
                        </view>
                        <view class="win-msg" v-else>
                            <view class="p">为保障抽奖奖品顺利发放</view>
                            <view class="p">请先前往确认收货地址</view>
                        </view>
                        <view class="win-btn" v-if="activityResult.state === 'wait'" @click="selectAddress" >去确认</view>
                        <view class="win-btn" v-if="activityResult.state === 'ship'" @click="winShow = false">已确认，等待发货</view>
                        <view class="win-tips" v-if="activityResult.state === 'ship'" @click="selectAddress">修改发货地址</view>
                        <view class="win-btn" v-if="activityResult.state === 'complete'" @click="winShow = false">奖品已发放</view>
                    </block>
                    <block v-if="activityResult.prizeType==='nft'">
                        <view class="win-image">
                            <u-image
                                    :src="nftInfo.mainImg"
                                    width="203rpx"
                                    height="203rpx"
                            ></u-image>
                        </view>
                        <view class="win-msg">
                            <view class="p" style="text-align: center">获得藏品{{ nftInfo.name }}x{{ nftInfo.number }}</view>
                            <view class="p" style="text-align: center">请前往藏品页</view>
                        </view>
                        <view class="win-btn" @click="navigateTo('pages/user/index', {}, 'switchTab')" >去确认</view>
                    </block>
                </view>
                <view class="lost" v-else>
                    <view class="lost-icon"></view>
                    <view class="lost-title">很遗憾未中奖</view>
                    <view class="lost-msg">
                        <view class="p">您与奖品擦肩而过</view>
                        <view class="p">不必灰心再接再厉哦～</view>
                    </view>
                    <view class="lost-btn" @click="winShow = false">好的</view>
                </view>
            </u-popup>
        </view>
        <view v-else class="first">
            <view class="banner"></view>
            <view class="activity-log" @click="navigateTo('pages/lotteryLog/index', { activityId })">抽奖记录 ></view>
            <view class="tips">您可参与抽奖<text>{{userActivity? userActivity.awardTime:0}}</text>次</view>
            <view class="desc">购买指定系列藏品可抽奖，本期奖品共 <text>{{ activityInfo.number }}</text> 份</view>
            <view class="product">
                <block v-for="(item, k) in activityInfo.prizeInfo">
                    <view v-if="(k+1)%2 == 0" class="add-plus"></view>
                    <view class="nft">
                        <view class="nft-img">
                            <u-image
                                :src="item.mainImg"
                                width="230rpx"
                                height="230rpx"
                            ></u-image>
                        </view>
                        <view class="nft-name">{{item.name}} x {{ item.number }}</view>
                        <view class="nft-status">{{item.description}}</view>
                    </view>
                </block>
                <!--view class="nft">
                    <view class="nft-img">
                        <image
                                src="https://img.ionepin.com/51794c4a159b1167c8c3865c57810a30ece65cbb.png"
                                style="width: 230rpx;height: 230rpx;"
                        ></image>
                    </view>
                    <view class="nft-name">数字藏品《****》x 1</view>
                    <view class="nft-status">（隐藏款）</view>
                </view-->
                <!--view class="goods">
                    <view class="goods-img">
                        <image
                                src="https://img.ionepin.com/bbece03656ca37401cb50eca5819693bbf0c45ad.png"
                                style="width: 100%;height: 100%;"
                        ></image>
                    </view>
                    <view class="goods-name">咪咕熊猫系列手办 x 1 </view>
                    <view class="goods-status">（随机款）</view>
                </view-->
            </view>
            <view class="btn" @click="onsubmit">立即抽奖</view>
            <view class="active-time">抽奖结果将于{{ activityInfo.endAt }}公布</view>
            <view class="activity-rule">
                <view class="rule-title">————【 抽奖活动规则 】————</view>
                <view class="rule-content">
                    <view v-for="(info, k) in activityInfo.ruleInfo" :key="k" class="p">{{k+1}}. {{ info }}</view>
                    <!---view class="p">1.<text style="color: #FFCE47">注册用户</text>可获得抽奖机会一次</view>
                    <view class="p">2.抢购<text style="color: #FFCE47">咪咕熊猫太空系列NFT</text>可获得抽奖机会一次</view>
                    <view class="p"> 3.抽奖活动时间2022.04.01 00:00:00-2022.04.04 00:00:00 </view>
                    <view class="p">4.抽奖结果将于2022.04.04 10:00:00公布</view--->
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import { getActivityNum, sysConfigs, getActivityResult } from "@/config/api"
    import { activityCreate } from "@/config/api-java"
    export default {
        data() {
            return {
                activityId: null,
                activityInfo: {},
                userActivity: {},
                activityDetail: {},
                timeData: {},
                activityRuleMSg: [],
                winShow: false,
                activityResult: {},
                nftInfo: {}
            }
        },
        onLoad(option) {
            this.activityId = option.activityId
        },
        computed: {

        },
        onShow() {
            this.getData()
        },
        methods: {
            async getData() {
                const res = await getActivityNum({activityId: this.activityId})
                this.activityInfo = res.activityInfo
                this.userActivity = res.userActivity
                this.activityDetail = res.activityDetail
                const result = await getActivityResult({activityId: this.activityId})
                if (this.activityInfo.open == 1) {
                    this.winShow = true
                    this.nftInfo = this.getNftInfo()
                }
                this.activityResult = result
            },
            onChange(e) {
                this.timeData = {
                    hours: e.hours + e.days * 24,
                    minutes: e.minutes,
                    seconds: e.seconds
                }
            },
            navigateTo(path, params={}, type='navigateTo') {
                uni.$u.route({
                    url: path,
                    params,
                    type
                })
            },
            async onsubmit() {
                uni.showLoading({
                    title: '正在抽奖中...'
                })
                const res = await activityCreate(this.activityId)
                await this.getData()
                uni.hideLoading()
                uni.showToast({
                    title: "抽奖成功"
                })
            },
            selectAddress() {
                uni.$u.route({
                    url: 'pages/address/index',
                    params: {
                        select: 1,
                        activityResultId: this.activityResult.id
                    }
                })
            },
            getNftInfo() {
                var nft = null
                this.activityInfo.prizeInfo.forEach(item => {
                    if (item.type == 'nft') {
                        nft = item
                        return
                    }
                })
                return nft
            }

        }
    }
</script>

<style lang="scss" scoped>
    .container {
        box-sizing: border-box;
        background: url("https://img.ionepin.com/a2fa9c1e168b5f8c3f63b564152a31f7476f3962.png") no-repeat;
        background-size: 100% 100%;
        width: 100%;
        /* #ifndef H5 */
        min-height: calc(100vh - 44px);
        /* #endif */
        /* #ifdef H5 */
        min-height: 100vh;
        /* #endif */
        padding-top: 50rpx;
        position: relative;
        padding-bottom: 30rpx;
        .first {
            .banner {
                background: url("https://img.ionepin.com/55191e138235b4e7b6db1767ed58d0a3b1cb9a97.png") no-repeat;
                background-size: 100% 100%;
                width: 536rpx;
                height: 406rpx;
                margin: auto;
            }

            .activity-log {
                position: absolute;
                top: 56rpx;
                right: 0;
                text-align: center;
                background: url("https://img.ionepin.com/0667b41c1d294f63a2e8990c0c493ec467e11292.png") no-repeat;
                background-size: 100% 100%;
                width: 140rpx;
                height: 44rpx;
                line-height: 44rpx;
                font-size: 24rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #000000;
            }

            .tips {
                font-size: 32rpx;
                font-family: PingFang-SC-Bold, PingFang-SC;
                font-weight: bold;
                color: #FFFFFF;
                margin: 33rpx auto 21rpx auto;
                text-align: center;

                text {
                    color: #FEDC00;
                    font-size: 42rpx;
                    margin: 0 20rpx;
                }
            }

            .desc {
                width: 615rpx;
                height: 60rpx;
                background: rgba(255, 255, 255, 0.2);
                border-radius: 30rpx;
                margin: auto;
                font-size: 24rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
                text-align: center;
                line-height: 60rpx;

                text {
                    font-size: 30rpx;
                    font-family: PingFang-SC-Bold, PingFang-SC;
                    font-weight: bold;
                    margin: 0 10rpx;
                }
            }

            .product {
                display: flex;
                align-items: center;
                justify-content: center;

                .nft {
                    .nft-img {
                        box-sizing: border-box;
                        background: url("https://ionepin-dev.oss-cn-shenzhen.aliyuncs.com/e6d06dd7f6e4328be01c0a50d220f0e36eba5a90.png") no-repeat;
                        background-size: 100% 100%;
                        width: 300rpx;
                        height: 300rpx;
                        margin-top: 30rpx;
                        padding: 35rpx;
                    }

                    .nft-name {
                        width: 300rpx;
                        font-size: 26rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #FFFFFF;
                        text-align: center;
                        overflow:hidden;
                        white-space:nowrap;
                        text-overflow: ellipsis;
                    }

                    .nft-status {
                        font-size: 26rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #FFFFFF;
                        text-align: center;
                    }
                }

                .add-plus {
                    background: url("https://img.ionepin.com/86ddd850e29235a4960253321ee4f8ae8c347c39.png") no-repeat;
                    background-size: 100% 100%;
                    width: 44rpx;
                    height: 44rpx;
                    margin-bottom: 50rpx;
                }

                .goods {
                    .goods-img {
                        box-sizing: border-box;
                        background: url("https://ionepin-dev.oss-cn-shenzhen.aliyuncs.com/e6d06dd7f6e4328be01c0a50d220f0e36eba5a90.png") no-repeat;
                        background-size: 100% 100%;
                        width: 300rpx;
                        height: 300rpx;
                        margin-top: 30rpx;
                        padding: 35rpx;
                    }

                    .goods-name {
                        font-size: 26rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #FFFFFF;
                        text-align: center;
                    }

                    .goods-status {
                        font-size: 26rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #FFFFFF;
                        text-align: center;
                    }
                }
            }

            .btn {
                width: 614rpx;
                height: 88rpx;
                background: url("https://img.ionepin.com/2c18608efc64e23a1dcec0518ea66efde128f71a.png") no-repeat;
                background-size: 100% 100%;
                line-height: 88rpx;
                font-size: 32rpx;
                font-weight: 400;
                color: #FFFFFF;
                text-align: center;
                margin: 40rpx auto 0 auto;
            }

            .active-time {
                font-size: 24rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #AA99CD;
                text-align: center;
                margin: 30rpx auto 0 auto;
            }

            .activity-rule {
                margin: 39rpx 45rpx 0 45rpx;
                background: rgba(255, 255, 255, 0.2);
                border-radius: 14 rpx;
                padding: 26rpx 23rpx 29rpx 23rpx;

                .rule-title {
                    text-align: center;
                    font-size: 28rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #FFFFFF;
                }

                .rule-content {
                    .p {
                        font-size: 22rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #FFF4F5;
                        text-align: left;
                    }
                }
            }
        }
        .action {
            .banner {
                background: url("https://ionepin.oss-accelerate.aliyuncs.com/firstgrade/icon_success.png") no-repeat;
                background-size: 100% 100%;
                width: 120rpx;
                height: 120rpx;
                margin: 140rpx auto 0 auto;
            }
            .state {
                margin-top: 34rpx;
                font-size: 44rpx;
                font-family: PingFang-SC-Bold, PingFang-SC;
                font-weight: bold;
                color: #FEDC00;
                text-align: center;
            }
            .activity-log {
                position: absolute;
                top: 56rpx;
                right: 0;
                text-align: center;
                background: url("https://img.ionepin.com/0667b41c1d294f63a2e8990c0c493ec467e11292.png") no-repeat;
                background-size: 100% 100%;
                width: 140rpx;
                height: 44rpx;
                line-height: 44rpx;
                font-size: 24rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #000000;
            }
            .tips {
                font-size: 32rpx;
                font-family: PingFang-SC-Bold, PingFang-SC;
                font-weight: bold;
                color: #FFFFFF;
                margin: 62rpx auto 21rpx auto;
                text-align: center;
                text {
                    color: #FEDC00;
                    font-size: 42rpx;
                    margin: 0 20rpx;
                }
            }
            .action-kj {
                width: 320rpx;
                height: 62rpx;
                background: rgba(255, 255, 255, 0.2);
                border-radius: 4rpx;
                margin: 71rpx auto 0 auto;
                .time {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    .action-kj-title {
                        display: block;
                        margin-left: 21rpx;
                        margin-right: 15rpx;
                        font-size: 28rpx;
                        font-weight: 400;
                        color: #FFFFFF;
                        line-height: 62rpx;
                    }
                    .time__item {
                        font-size: 30rpx;
                        color: #FFFFFF;
                        font-weight: bold;
                        line-height: 62rpx;
                    }
                }
            }

            .btn {
                width: 614rpx;
                height: 88rpx;
                background: url("https://img.ionepin.com/2c18608efc64e23a1dcec0518ea66efde128f71a.png") no-repeat;
                background-size: 100% 100%;
                line-height: 88rpx;
                font-size: 32rpx;
                font-weight: 400;
                color: #FFFFFF;
                text-align: center;
                margin: 85rpx auto 0 auto;
            }
            .disable-btn {
                background: url("https://img.ionepin.com/dadc98ac27d07dd95a5ec7776638f129c0cbec10.png") no-repeat;
                background-size: 100% 100%;
                font-size: 32rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #B6B6B6;
                width: 614rpx;
                height: 88rpx;
                text-align: center;
                line-height: 88rpx;
                margin: 85rpx auto 0 auto;
            }
            .active-time {
                font-size: 24rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #AA99CD;
                text-align: center;
                margin: 30rpx auto 0 auto;
            }
            .activity-rule {
                margin: 92rpx 45rpx 0 45rpx;
                background: rgba(255, 255, 255, 0.2);
                border-radius: 14rpx;
                padding: 26rpx 23rpx 29rpx 23rpx;
                .rule-title {
                    text-align: center;
                    font-size: 28rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #FFFFFF;
                }
                .rule-content {
                    .p {
                        font-size: 22rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #FFF4F5;
                        text-align: left;
                    }
                }
            }
        }
        .win {
            width: 560rpx;
            box-shadow: 0 0 13rpx 0 #999999;
            border-radius: 18rpx;
            box-sizing: border-box;
            padding: 40rpx 0 58rpx 0;
            .win-icon {
                background: url("https://img.ionepin.com/bc9b23f0ad6eabf3308c8c6d784c6597d75621da.png") no-repeat;
                background-size: 100% 100%;
                width: 456rpx;
                height: 290rpx;
                margin: 0 auto;
            }
            .win-title {
                font-size: 42rpx;
                font-weight: bold;
                color: #356CE7;
                text-align: center;
            }
            .win-msg {
                width: 308rpx;
                height: 88rpx;
                font-size: 28rpx;
                font-weight: 400;
                color: #4A4A4A;
                margin: 30rpx auto 0 auto;
                text-align: center;
            }
            .win-btn {
                width: 478rpx;
                height: 86rpx;
                background: linear-gradient(214deg, #FFB4D3 0%, #AB6DFF 21%, #696CFF 61%, #74E3FF 100%);
                border-radius: 44rpx;
                border: 1rpx solid #0091FF;
                font-size: 32rpx;
                font-weight: 400;
                color: #FFFFFF;
                text-align: center;
                line-height: 86rpx;
                margin: 50rpx auto 0 auto;
            }
            .win-image {
                width: 203rpx;
                height: 203rpx;
                margin: auto;
                padding: 26rpx 0;
            }
            .win-tips {
                font-size: 22rpx;
                font-weight: 400;
                color: #356CE7;
                text-align: center;
                margin-top: 20rpx;
            }
        }
        .lost {
            width: 560rpx;
            box-shadow: 0 0 13rpx 0 #999999;
            border-radius: 18rpx;
            box-sizing: border-box;
            padding: 40rpx 0 58rpx 0;
            .lost-icon {
                background: url("https://img.ionepin.com/b099f543fd1dbf4d5027b25af368ae3555ac395f.png") no-repeat;
                background-size: 100% 100%;
                width: 140rpx;
                height: 149rpx;
                margin: 0 auto;
            }
            .lost-title {
                font-size: 42rpx;
                font-weight: bold;
                color: #000000;
                text-align: center;
                margin-top: 25rpx;
            }
            .lost-msg {
                width: 280rpx;
                font-size: 28rpx;
                font-weight: 400;
                color: #4A4A4A;
                margin: 29rpx auto 0 auto;
            }
            .lost-btn {
                width: 480rpx;
                height: 86rpx;
                background: #000000;
                border-radius: 44rpx;
                font-size: 32rpx;
                font-weight: 400;
                color: #FFFFFF;
                text-align: center;
                line-height: 86rpx;
                text-align: center;
                margin: 50rpx auto 0 auto;
            }
        }
        .p {
            text-align: center;
        }
    }
</style>
